<template>
  <div class="col-box">
    <div class="col-but">
      <span
        v-for="(i, k) in dateButList"
        :key="i.key"
        @click="changeBut(i, k)"
        :class="[k == isBc ? 'action-span-item' : '', 'span-item']"
        >{{ i.name }}</span
      >
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  model: {
    prop: "checked",
    event: "isButIdx",
  },
  props: ["checked"],
  watch: {
    checked: {
      handler(val) {
        this.isBc = val;

      },
    },
  },
  data() {
    return {
      isBc: -1,

      dateButList: [
        {
          key: "yesterday",
          name: "昨天",
        },
        {
          key: "today",
          name: "今天",
        },
        {
          key: "lastWeek",
          name: "上周",
        },
        {
          key: "thisWeek",
          name: "本周",
        },
        {
          key: "lastMonth",
          name: "上月",
        },
        {
          key: "thisMonth",
          name: "本月",
        },
        {
          key: "thisSeason",
          name: "本季",
        },
        {
          key: "thisYear",
          name: "本年",
        },
      ],
    };
  },

  methods: {
    changeBut(val, idx) {

      this.isBc = idx;

      this.dateVal = [];
      switch (val.key) {
        case "yesterday":
          this.dateVal[0] = this.$dayjs()
            .startOf("day")
            .subtract(1, "days")
            .format("YYYY-MM-DD");
          this.dateVal[1] = this.$dayjs()
            .startOf("day")
            .subtract(1, "days")
            .format("YYYY-MM-DD");
          break;
        case "today":
          this.dateVal[0] = this.$dayjs().format("YYYY-MM-DD");
          this.dateVal[1] = this.$dayjs().format("YYYY-MM-DD");
          break;
        case "lastWeek":
          this.dateVal[0] = this.$dayjs()
            .startOf("week")
            .subtract(1, "weeks")
            .add(1, "day")
            .format("YYYY-MM-DD");
          this.dateVal[1] = this.$dayjs()
            .endOf("week")
            .subtract(1, "weeks")
            .add(1, "day")
            .format("YYYY-MM-DD");
          break;
        case "thisWeek":
          this.dateVal[0] = this.$dayjs()
            .startOf("week")
            .add(1, "day")
            .format("YYYY-MM-DD");
          this.dateVal[1] = this.$dayjs()
            .endOf("week")
            .add(1, "day")
            .format("YYYY-MM-DD");
          break;
        case "lastMonth":
          this.dateVal[0] = this.$dayjs()
            .startOf("month")
            .subtract(1, "months")
            .format("YYYY-MM-DD");
          this.dateVal[1] = this.$dayjs()
            .subtract(1, "months")
            .endOf("month")
            .format("YYYY-MM-DD");
          break;
        case "thisMonth":
          this.dateVal[0] = this.$dayjs().startOf("month").format("YYYY-MM-DD");
          this.dateVal[1] = this.$dayjs().endOf("month").format("YYYY-MM-DD");
          break;
        case "thisSeason":
          const currentMonth = this.$dayjs().month();
          let startMonth, endMonth;
          if (currentMonth < 3) {
            startMonth = 0; // 1月
            endMonth = 2; // 3月
          } else if (currentMonth < 6) {
            startMonth = 3; // 4月
            endMonth = 5; // 6月
          } else if (currentMonth < 9) {
            startMonth = 6; // 7月
            endMonth = 8; // 9月
          } else {
            startMonth = 9; // 10月
            endMonth = 11; // 12月
          }
          this.dateVal[0] = this.$dayjs().month(startMonth).startOf("month").format("YYYY-MM-DD");
          this.dateVal[1] = this.$dayjs().month(endMonth).endOf("month").format("YYYY-MM-DD");

          // this.dateVal[0] = this.$dayjs()
          //   .startOf("quarter")
          //   .format("YYYY-MM-DD");
          // this.dateVal[1] = this.$dayjs().endOf("quarter").format("YYYY-MM-DD");
          break;
        case "thisYear":
          this.dateVal[0] = this.$dayjs().startOf("year").format("YYYY-MM-DD");
          this.dateVal[1] = this.$dayjs().endOf("year").format("YYYY-MM-DD");
          break;
        default:
          [];
          break;
      }
      this.$emit("dateChangeType", this.dateVal);
      this.$emit("isButIdx", idx);
    },
  },
};
</script>

<style scoped lang='scss'>
.col-box {

  .col-but {
    display: inline-flex;
    justify-content: space-between;
      margin-right: 10px;
  }

  .span-item {
    color: #606266;
    border-radius: 4px;
    padding: 0 10px;
    /* background-color: aqua; */
    cursor: pointer;
  }

  .action-span-item {
    //background-color: rgb(217, 236, 255);
    color: #1890ff;
      font-weight: bold;
  }
}
</style>
